<html>
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <link rel="stylesheet" type="text/css" href="http://www.addressofmysite/sls.css">
   </head>
<body onload="onLoad()">

<div id="dd">
  </div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
  <script >
    function onLoad(){

        $("span[class='check']").hide()
        $("input[id='resetButton']").hide()

}
  if (!("scramble" in Array.prototype)) {
  Object.defineProperty(Array.prototype, "scramble", {
    enumerable: false,
    value: function() {
      var o, i, ln = this.length;
      while (ln--) {
        i = Math.random() * (ln + 1) | 0;
        o = this[ln];
        this[ln] = this[i];
        this[i] = o;
      }
      return this;
    }
  });
} 
</script>
<script >// scripts here:
  var ok = "&#10003;"
  var nok = '&#10007;'
var sgn;

  function submitQuiz2() {
    console.log('submitted');

function hideshow() {
        document.getElementById('submitButton').style.display = 'none';
        document.getElementById('resetButton').style.display = 'block';
         $("span[class='check']").show()
    }

    function colorize(){
      var allCor = document.getElementsByName("correctString");
      for (var i = 0; i < allCor.length; i++){
        allCor[i].style.color='#009999'
      }

    }
    colorize();
  // get each answer score
    function answerScore (qName) {
      

    <!--  console.log ("jquery test", $("span[name=\'" + qName + "\']").text() ) -->
      var radiosNo = document.getElementsByName(qName);
      
      for (var i = 0; i < radiosNo.length; i++) {
        var answers = radiosNo[i].getElementsByClassName('answer') ;
        console.log ("LEN " + i)
        for (var a = 0; a < answers.length; a++) {
          if (answers[a].selected) {
            var answerValue = Number(answers[a].value);

          } 



      }

 
    }
      // change NaNs to zero
      if (isNaN(answerValue)) {
        answerValue = 0;
      }
            if (!answerValue ){    
             <!--   console.log ("Q" + qName + " "+ answerValue +"-- " + $("option[name=\'" + qName + "\'][value='1']").text()) -->
               $("span[name=\'" + qName + "\']").text($("option[name=\'" + qName + "\'][value='1']").text())
               $("span[name=\'" + qName + "\']").css('color', 'red')
               $("span[name=\'" + qName + "\']").css('padding', '10px')
             }
             else
              
            {    
             <!--   console.log ("Q" + qName + " "+ answerValue +"-- " + $("option[name=\'" + qName + "\'][value='1']").text()) -->
               $("span[name=\'" + qName + "\']").css('color', '#009999')
               $("span[name=\'" + qName + "\']").css('padding', '10px')
             }


      return answerValue;
    }
  // calc score with answerScore function
    var calcScore = calculateScore (); 
    console.log("CalcScore: " + calcScore); // it works!

    function calculateScore (){
      var calcScore = 0


      var questions = document.getElementsByClassName('question');
      var count = 0

      for (var i = 0; i < questions.length; i++){

        count += answerScore (questions[i].getAttribute("name"));
 
      }
      return count

    }


  // calculate "possible score" integer
    var questionCountArray = document.getElementsByClassName('question');
    var questionCounter = 0;
    for (var i = 0, length = questionCountArray.length; i < length; i++) {
      questionCounter++;
    }
  // show score as "score/possible score"
    var showScore = "Your Score: " + calcScore +"/" + questionCounter;
  // if 4/4, "perfect score!"
    if (calcScore === questionCounter) {
      showScore = showScore + "  <strong>C'est parfait !</strong>"
    };
    document.getElementById('userScore').innerHTML = showScore;
  
hideshow()

}

var quiz =[ { "question": "able, capable  ","correct": "capable","choices": ["capable","supplémentaire","publicitaire","adulte","acceptable","acide","complice","accessible","comptable","absurde"] },{ "question": "absurd   ","correct": "absurde","choices": ["absurde","acceptable","accessible","capable","publicitaire","complice","adulte","comptable","acide","supplémentaire"] },{ "question": "acceptable, satisfactory  ","correct": "acceptable","choices": ["acceptable","supplémentaire","accessible","absurde","publicitaire","acide","capable","adulte","complice","comptable"] },{ "question": "accessible, approachable  ","correct": "accessible","choices": ["accessible","supplémentaire","absurde","acceptable","comptable","adulte","capable","acide","complice","publicitaire"] },{ "question": "accomplice   ","correct": "complice","choices": ["complice","comptable","accessible","capable","supplémentaire","acceptable","adulte","acide","absurde","publicitaire"] },{ "question": "accountant, accountable  ","correct": "comptable","choices": ["comptable","adulte","capable","acide","publicitaire","acceptable","accessible","complice","supplémentaire","absurde"] },{ "question": "acid   ","correct": "acide","choices": ["acide","comptable","complice","supplémentaire","acceptable","adulte","publicitaire","accessible","capable","absurde"] },{ "question": "additional   ","correct": "supplémentaire","choices": ["supplémentaire","acceptable","absurde","publicitaire","comptable","accessible","acide","capable","complice","adulte"] },{ "question": "adult   ","correct": "adulte","choices": ["adulte","absurde","capable","acide","acceptable","complice","supplémentaire","publicitaire","comptable","accessible"] },{ "question": "advertising, promotional  ","correct": "publicitaire","choices": ["publicitaire","complice","acceptable","adulte","acide","supplémentaire","absurde","capable","accessible","comptable"] }  ]


<!-- quiz.forEach(q => q.choices.scramble()); -->

quiz.forEach(function(q){
  q.choices.scramble()
})


quiz.scramble();


currentIndex = quiz.length 

question = "<ul style=\"list-style-type: none; padding-left: 1px; padding-top: 5px;\" class=\"questions\" >"
choises = ""
for (i = 0; i < currentIndex; i++) {
   var qName = "q" + i
  question += "<li class=\"question\" name=\""+ qName + "\"><b>" + quiz[i].question + "</b>"

 
  console.log("------------------------------------------")  
  choises += "<ul style=\"list-style-type: none; \" class=\"answers\"><li style=\"padding-bottom: 10px; padding-top: 10px;\"class=\"answers\"><span class=\"arrow\">&#8594;</span> <select style=\"padding:10px;\" class=\"ans\" name=\""+ qName + "\"><option> - - Select an option - - </option>"
  for (j = 0; j < quiz[i].choices.length; j++) {
     var isCorrect = "0"
    
     var lblId = "wrongString" + i

     if (quiz[i].choices[j] === quiz[i].correct){
          isCorrect = "1"

          lblId = "correctString" 
    }
     
     <!-- console.log (quiz[i].choices[j] +" - "+ lblId + " " + qName) -->
     choises += "<option style=\"text-align: center;\"  class=\"answer\" name=\""+ qName + "\" value=\"" + isCorrect + "\">" + quiz[i].choices[j] + "</option>"
      
  }

  choises += "</select><br><span class=\"check\" name=\""+ qName + "\"><br></span></li></ul></li>"


  question += choises 
  choises = ""
}
question += "</ul>"
 console.log(question) 

document.getElementById("dd").innerHTML = question
</script>



<p><br>
</p>
<div>
  <h2 class="quizScore" id="userScore"></h2>
</div>

<div class="submitter">
  <input class="quizSubmit" id="submitButton" onclick="submitQuiz2()" type="submit" value="Submit">
  <input class="quizReset" id="resetButton" onclick="location.reload()" type="reset" value="Try Again!">
</div>

<!--show score upon submit-->


</body>
</html>
